import React, { useState } from 'react';
// import axios from 'axios';
import { Divider } from 'antd';
import ServiceCard from './serviceCard';
import './recommend.css';
import ServiceCardSpecifics from './serviceCardSpecifics';
import SearchBox from '../../components/searchBox';
//推荐页面(Recommend)

function Recommend() {

  const [selectedServiceId, setSelectedServiceId] = useState(1);//默认渲染id为1的信息

  const recommendedServices = [
    {
      id: 1,
      name: '社区健身活动',
      description: '每周一次的社区健身活动，欢迎各年龄段的居民参加。',
      provider: '社区健康服务中心',
      cost: '免费',
      location: '社区公园',
      dateTime: '每周三下午2点',
    },
    {
      id: 2,
      name: '老年人康复训练',
      description: '提供针对老年人的康复训练课程，帮助老年人恢复身体功能。',
      provider: '康复医疗中心',
      cost: '200元/课时',
      location: '康复医疗中心',
      dateTime: '每周一、三、五上午10点',
    },
    {
      id: 3,
      name: '社区心理咨询',
      description: '提供老年人心理咨询服务，解决心理健康问题。',
      provider: '社区心理健康服务站',
      cost: '免费',
      location: '社区卫生服务中心',
      dateTime: '每周五上午9点',
    },
    {
      id: 4,
      name: '老年人陪护',
      description: '提供老年人陪护服务，解决老年人独自一人无人看护问题。',
      provider: '养老服务中心',
      cost: '500元/天',
      location: '养老服务中心',
      dateTime: '每天',
    },
  ];

  const handleServiceClick = (id) => {
    setSelectedServiceId(id);
  };

  // useEffect(() => {
  //   fetchRecommendedServices();
  // }, []);

  // const fetchRecommendedServices = async () => {
  //   try {
  //     // 发送请求获取推荐的养老服务
  //     const response = await axios.get('http://192.168./recommended-services');
  //     setRecommendedServices(response.data);
  //   } catch (error) {
  //     console.error('Error fetching recommended services:', error);
  //   }
  // };

  return (
    <div>
      <SearchBox />
      <Divider/>
      <div className="recommendation-container">
        {/* <h2 className='recommendation-title'>个性化推荐</h2> */}
        <div className='column-container'>
          <div className="left-column">
            <div className="service-card-container">
              {recommendedServices.map(service => (
                <ServiceCard key={service.id} service={service} onClick={() => handleServiceClick(service.id)} />
              ))}
            </div>
          </div>
          {/* 右侧推荐内容详情部分 */}
          <div className="right-column">
            {selectedServiceId !== null && (
              <ServiceCardSpecifics
                service={recommendedServices.find(service => service.id === selectedServiceId)}
              />
            )}
            {/* 右侧内容详情部分的内容 */}
          </div>
        </div>
      </div>
    </div>
  );
}

export default Recommend;
